<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<h1> 课程管理界面 </h1>
<table class="layui-hide" id="coursetable" lay-filter="coursetable"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">增加一个课程</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<form class="layui-form" lay-filter = "showform" style="margin: 5%; display: none" id = "window">
    <div class="layui-form-item">
        <label class="layui-form-label">课程名</label>
        <div class="layui-input-inline">
            <input id="name" type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">课程号</label>
        <div class="layui-input-inline">
            <input id="cid" type="text" name="cid" autocomplete="off" class="layui-input">
        </div>
    </div>

</form>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>

    layui.use(['table', 'form'], function(){

        var table = layui.table,
            form = layui.form,
                $ = layui.jquery;
        table.on('tool(coursetable)', function (obj){
             var Tdata = obj.data,

              layEvent = obj.event;
            console.log("原来表中的数据", Tdata);
            console.log(layEvent)

            /**
             * 修改操作
             */
            if(layEvent === "edit") {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/courseFindById",
                    data: obj.data,
                    success: function (res) {
                        console.log(res);
                        Rdata = res.data;
                        layer.open({
                            type: 1
                            ,skin: 'layui-layer-molv'
                            ,area: ['500px', '500px']
                            ,title: ['编辑课程信息','font-size:18px']
                            ,btn: ['确定', '取消']
                            ,shadeClose: true
                            ,shade: 0 //遮罩透明度
                            ,maxmin: true //允许全屏最小化
                            ,content:$("#window") //弹窗路径,
                            ,success:function(layero, index){
                                $('#name').val(Rdata.name);
                                $('#cid').val(Rdata.cid);
                                form.render();
                            }
                            , yes:function(){
                                //拿到表格数据
                                let tabledata = form.val("showform");
                                console.log(tabledata)
                                tabledata.id = Rdata.id;

                                $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    url: "/courseUpdateById",
                                    data: tabledata,
                                    success: function (res) {
                                        console.log(res);
                                    },
                                    error: function (res){
                                        console.log(res);
                                    }
                                });
                                layer.close(layer.index);
                            }
                            , end: function (){
                                table.reload('coursetable');
                            }

                        })
                    },
                    error: function (res){
                        console.log(res);
                    }
                });


            }
            /**
             *  刷新操作
             */
            else if(layEvent === "del") {

                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构

                    layer.close(index);
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/courseDel",
                        data: obj.data,
                        success: function (res) {
                            console.log(res);
                        },
                        error: function (res){
                            console.log(res);
                        }
                    });
                });
            }
        })

        /**
         * table显示
         */
        table.render({
            elem: '#coursetable'
            ,url: '/courseFind'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:150, fixed: 'left'}
                ,{field:'name', title:'课程名', width:120, edit: 'text'}
                ,{field:'cid', title:'课程号', width:120, edit: 'text'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        //工具栏事件
        table.on('toolbar(coursetable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    $('#name').val("");
                    $('#cid').val("");
                    layer.open({
                        type: 1
                        ,skin: 'layui-layer-molv'
                        ,area: ['500px', '500px']
                        ,title: ['编辑课程信息','font-size:18px']
                        ,btn: ['确定', '取消']
                        ,shadeClose: true
                        ,shade: 0 //遮罩透明度
                        ,maxmin: true //允许全屏最小化
                        ,content:$("#window") //弹窗路径,
                        , yes:function(){
                            let formdata = form.val("showform");
                            $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: "/courseAdd",
                                data: formdata,
                                success: function (res) {
                                    console.log(res);
                                },
                                error: function (res){
                                    console.log(res);
                                }
                            });
                            layer.close(layer.index);
                        }
                        , end: function (){
                            table.reload('coursetable');
                        }
                    })
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });
    });
</script>



</body>

</html>

